{extend name="public/common"}

{block name="style"}
<title>党群建设</title>
<link rel="stylesheet" href="/home/css/construction/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="head">
        <div v-for="(item,key) in navbar" :class="selected == (key+1) ? 'active' : ''" @click="choose(key+1)">{{item}}</div>
    </div>
    <div class="body" infinite-scroll-immediate-check="false" v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10">
        <div class="list" v-for="(child,is,key) in list" v-show="selected == (key+1)">
            <div class="img-box">
                <img src="/home/images/construction/background-3.jpg" v-if="key == 0"/>
                <img src="/home/images/construction/background-4.jpg" v-else-if="key == 1"/>
                <img src="/home/images/construction/background-6.jpg" v-else="key == 2"/>
            </div>
            <ul>
                <li v-for="(item,index) in child">
                    <div class="top">
                        <div class="avatar">
                            <img :src="item.header?item.header:'/home/images/common/default.png'" />
                        </div>
                        <div class="basic">
                            <p class="name">{{item.username}} <span>{{item.department_name}}</span></p>
                            <p class="time">{{item.time}}</p>
                        </div>
                    </div>

                    <div class="content-box">
                        <div class="content">
                            <p>{{item.content}}</p>
                            <div class="img-list" v-if="item.img.length > 0">
                                <div class="img-box" @click="loadImg(imgUrl.preview_path,item.img)" v-for="imgUrl in item.img">
                                    <img :src="imgUrl.index_path" />
                                </div>
                            </div>
                            <div class="icons">
                                <p>
                                    <span :class="item.is_like == 0?'dislike':'like'" @click="commentLike(item)">{{item.likes}}</span>
                                    <span class="add-comment" @click="addComment(item)">{{item.comments}}</span>
                                </p>
                                <span class="delete" v-if="userId == item.uid" @click="deleteNews(item.id,index)">删除</span>
                            </div>
                        </div>
                        <div class="comments" v-if="item.comments > 0">
                            <ul>
                                <li v-for="(comment,i) in item.comment">
                                    <p>
                                        <span>{{comment.nickname}}：</span><span>{{comment.content}}</span>
                                    </p>
                                    <span class="delete" v-if="userId == comment.uid" @click="deleteComment(item,i)"></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="loading-more" v-if="len >= 10">
            <div v-if="loadOver && len >= 10" class="load" style="font-size:0.3rem">{{texts}}</div>
            <div v-else v-show="loading">
                <mt-spinner :type="3" color="#999"></mt-spinner>
            </div>
        </div>
        <div class="empty" v-if="len == 0">
            <img class="empty-img" src="/home/images/common/empty.png" alt="">
            <p class="empty-title">暂无内容，敬请期待</p>
            <p class="empty-text">to be continued...</p>
        </div>
    </div>
    <div class="box" v-show="sendBoxValid" @click.prevent.self="closeSendBox">
        <div class="send-box">
            <div class="box-body">
                <textarea placeholder="请说出你的想法" v-model="content"></textarea>
                <div class="send blue" @click="send">发送</div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="send" @click="toSend">发布</div>
    </div>
</div>
{/block}

{block name="script"}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    console.log({$list})
    var vw = new Vue({
        el: "#app",
        data: {
            img:[],
            list: {$list},
            selected: 1,
            texts: '没有更多了~',
            loadOver: true,
            loading: false,
            len: {$list}.type1.length,
            navbar: ['红色驿站','职工之家','青年团体'],
            sendBoxValid: false,
            content: '',
            item: {},
            userId: '{$userid}'
        },
        created() {
            this.pushHistory();
            this.selected = window.sessionStorage.getItem('construction_type')?window.sessionStorage.getItem('construction_type'):1;
            console.log(this.userId);
            window.sessionStorage.removeItem('construction_type');
            this.len = this.list['type'+this.selected].length;
            wx.config({
                debug: false,
                appId: {$jsSign}.appid,
                timestamp:{$jsSign}.timestamp ,
                nonceStr: {$jsSign}.noncestr,
                signature: {$jsSign}.signature,
                jsApiList: ['previewImage']
            });
        },
        methods: {
            pushHistory() {
                window.addEventListener("popstate", function (e) {
                    self.location.reload();
                }, false);
                var state = {
                    title: "",
                    url: "#"
                };
                window.history.replaceState(state, "", "#");
            },
            choose(key) {
                var type = 'type'+key;
                this.selected = key;
                this.len = this.list[type].length;
                this.loadOver = true;
            },
            addComment(item) {
                var _this = this;
                _this.sendBoxValid = true;
                _this.item = item;
            },
            closeSendBox: function () {
                this.sendBoxValid = false
            },
            loadMore() {
                var _this = this;
                if (_this.len < 10) {
                    return false
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Construction/index")}', {
                    'length': _this.len,
                    'type': _this.selected,
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    var type = 'type'+_this.selected;
                    if (res.body.code == 1) {
                        if (data.data.length == 10) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.list[type].push(data.data[i]);
                        }
                        _this.len = _this.list[type].length;
                    } else {
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message: '加载失败，请重试', duration: 1500});
                    _this.loadOver = true;
                })
            },
            toSend() {
                window.location.href = '/home/construction/send.html';
                window.sessionStorage.setItem('construction_type',this.selected);
            },
            //评论点赞
            commentLike(item) {
                var _this = this;
                _this.$http.post('{:Url("Base/like")}', {
                    'type': 3,
                    'aid':item.id
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    if(data.code == 1){
                        if(item.is_like == 0){
                            item.likes ++;
                            item.is_like = 1;
                            _this.$toast({message:'点赞成功',iconClass: 'icon', duration:1500});
                        }else{
                            item.likes --;
                            item.is_like = 0;
                            _this.$toast({message:'取消成功',iconClass: 'icon', duration:1500});
                        }
                    }else{
                        _this.$toast({message:'网络错误，请重试',duration:1500});
                    }
                }, function () {
                    _this.$toast({message:'网络错误，请重试',duration:1500});
                })
            },
            send() {
                var _this = this;
                if (!_this.content) {
                    _this.$toast({message: '请说些什么吧！', duration: 1500});
                    return false
                }
                _this.$http.post('{:Url("Base/comment")}', {
                    'type': 3,
                    'aid': _this.item.id,
                    'content': _this.content
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    if (data.code == 1) {
                        var obj;
                        obj = {
                            'id': data.data.id,
                            'header': data.data.header,
                            'nickname': data.data.nickname,
                            'likes': data.data.likes,
                            'is_like': 0,
                            'create_time': data.data.create_time,
                            'content': data.data.content
                        };
                        _this.$toast({message: '评论成功', iconClass: 'icon', duration: 1500});
                        _this.item.comment.unshift(obj);
                        _this.item.comments++;
                        _this.sendBoxValid = false;
                        _this.content = '';
                    } else {
                        _this.$toast({message: '评论失败，请重试！', duration: 1500});
                    }
                }, function () {
                    _this.$toast({message: '评论失败，请重试！', duration: 1500});
                })
            },
            //            微信jssdk - 图片预览
            loadImg(src, imglist) {
                var urls = [];
                var current = window.location.protocol + '//' + window.location.host + src;
                for (var i in imglist) {
                    urls[i] = window.location.protocol + '//' + window.location.host + imglist[i].preview_path;
                }
                wx.previewImage({
                    current: current,
                    urls: urls
                });
            },
            deleteNews(id,index) {
                var _this = this;
                _this.$messagebox.confirm('是否删除该条新闻','党群分发').then(function () {
                    _this.$http.post('{:Url("Construction/del")}',{
                        'id': id
                    }, {emulateJSON: true}).then(function (res) {
                        var data = res.data;
                        if(data.code == 1) {
                            _this.list['type'+_this.selected].splice(index,1);
                            _this.len = _this.list['type'+_this.selected].length;
                        }
                    });
                });
            },
            deleteComment(item,index) {
                var _this = this;
                _this.$messagebox.confirm('是否删除该条评论','党群分发').then(function () {
                    _this.$http.post('{:Url("Base/commentdel")}',{
                        'id': item.comment[index].id
                    }, {emulateJSON: true}).then(function (res) {
                        var data = res.data;
                        if(data.code == 1) {
                            item.comment.splice(index,1);
                            item.comments --;
                        }
                    });
                });
            }

        }
    })
</script>
{/block}
